<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 我们对比发邮件模拟一个场景，就是选中之后，发送文件（也就是发送http请求） -->
    <input type="checkbox" name="" id="1"> 一
    <input type="checkbox" name="" id="2"> 二
    <input type="checkbox" name="" id="3"> 三
    <input type="checkbox" name="" id="4"> 四
    <input type="checkbox" name="" id="5"> 五
    <input type="checkbox" name="" id="6"> 六
    <input type="checkbox" name="" id="7"> 七
    <input type="checkbox" name="" id="8"> 八
    <input type="checkbox" name="" id="9"> 九
    <script>
        // 这里获取所有节点绑定事件
        function sendMessage (resp) {
            console.log("向张俊杰发送邮件（http请求）🌹 id为：",resp);
        }
        var checks = document.querySelectorAll("input")
        // console.log(checks);
        // for (var i = 0,c; c = checks[i++];) {
        //     c.onclick = function () {
        //         if(this.checked) {
        //             sendMessage(this.id)
        //         }
        //     }
        // }
        // 我们可以思考一下，如果我们短时间内点击了所有（一键全选），那么我们的请求就会发送很多次
        // 减少网络请求其实是解决web开发的最大开销，我们可以让请求收拢所有数据之后一次性发，这样就减小了服务器的压力
        // 接下来使用一个代理去收拢请求，我们可以设置2秒清除定时器，或者当请求长度达到某个值，这个可以根据场景需要去搞

        var proxySyncSendMessage = (function () {
            var cache = [],
            timer;
            return function (res) {
                cache.push(res)
                if(timer) {
                    return;
                }
                timer = setTimeout(() => {
                    var res = cache.join("-")
                    sendMessage(res)
                    clearInterval(timer)
                    timer = null
                    cache.length = 0
                }, 2000);
            }
        })()
        // 改造后我们使用代理
        for (let i = 0 , c; c = checks[i++];) {
            c.onclick = function () {
                if(this.checked) {
                proxySyncSendMessage(this.id)
                }
            }
        }
        // 这样我们就使用代理实现了一个参数的收拢大大减小了请求的发送
    </script>
</body>
</html>